<div class="print-container">
    <div class="print-left">
        <p class="bg-lightgray padding-m">我的外围设备（{{printers ? printers.length : 0}}）</p>
        <div *ngIf="!device">
            <p class="text-center margin-t-m">当前终端还没有配置任何外设</p>
            <button class="btn-primary btn-add" (click)="addDevice()"><i class="material-icons icon">add</i>添加外围设备</button>
        </div>
        <ul class="device-list" *ngIf="device">
            <li class="flex-row device-item" *ngFor="let printer of printers; let i = index">
                <div class="item-left flex-row auto-flex" (click)="editPrinter('configDevice',printer)">
                    <img class="img-printer" src="./assets/img/devtype-receipt-printer.png">
                    <div class="flex-column">
                        <p>{{printer.deviceName}}</p>
                        <p class="text-s">{{printer.productName}}</p>
                        <p class="text-s color-gray">{{printer.type}}({{printer.address}})</p>
                    </div>
                </div>
                <div class="item-right flex-row">
                    <span *ngIf="printer.isConnect">已连接</span>
                    <span class="color-warning" *ngIf="!printer.isConnect">未连接</span>
                    <span class="margin-l-s" *ngIf="printer.isUse">已启用</span>
                    <span class="margin-l-s color-warning" *ngIf="!printer.isUse">已禁用</span>
                    <md-menu #appMenu="mdMenu">
                        <button md-menu-item *ngIf="printer.isUse" (click)="disableUse(printer.id)">禁用</button>
                        <button md-menu-item *ngIf="!printer.isUse" (click)="disableUse(printer.id)">启用</button>
                        <button md-menu-item (click)="deletePrinter(printer.id)">删除</button>
                    </md-menu>
                    <button md-icon-button [mdMenuTriggerFor]="appMenu">
                        <md-icon>more_vert</md-icon>
                    </button>
                </div>
            </li>
        </ul>
    </div>
    <div class="print-right bg-gray">
        <add-printer (changePageName)="handle($event)" *ngIf="currentName == 'addDevice'"></add-printer>
        <device-type (changePageName)="handle($event)" *ngIf="currentName == 'deviceType'"></device-type>
        <device-interface (changePageName)="handle($event)" *ngIf="currentName == 'interfaceType'"></device-interface>
        <search-device (changePageName)="handle($event)" *ngIf="currentName == 'searchDevice'"></search-device>
        <wifi-print (changePageName)="handle($event)" *ngIf="currentName == 'wifiPrint'"></wifi-print>
        <config-device (changePageName)="handle($event)" [selectedPrinter]="selectedPrinter" (getList)="getPrinterList($event)" *ngIf="currentName == 'configDevice'"></config-device>
    </div>
</div>